<template>
    <div class="Historytimetable">
        <div class="Historytimetable-head">
            <label>
                <span>历史课程</span>
            </label>
            <!-- <label class="Timersvalues">
                <el-date-picker v-model="Timersvalue" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </label>
            <label class="screenings">
                <span>筛选</span>
            </label> -->
        </div>
        <div class="Historytimetable-content">
            <div class="Historytimetable-content-nav">
                <ul>
                    <li v-for="(item,index) in TeachcourseNavList" :key="index" @click="Tabescelect(index)" :class="TeachcourseNavListIndex ==index?'navelecet':''">{{item}}</li>
                </ul>
            </div>
            <div class="Historytimetable-content-content" v-if="TeachcourseNavListIndex==0">
                <div class="Historytimetable-class-List">
                    <ul v-if="MyscheduleList.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无已结束课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in MyscheduleList" :key="index" @click="Toclassdetil(item)">
                            <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.masterAppointmentInfo.cover" alt="">
                                </label>
                                <label class="Historytimetable-class-Info">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.map.masterAppointmentInfo.title}}</span>
                                    </label>
                                    <label class="Historytimetable-class-Infos">
                                        <span>参与人数</span>
                                        <span>{{item.map.masterAppointmentInfo.connect_peoplenum}}</span>
                                    </label>
                                    <label>
                                        <span>评论</span>
                                        <span>{{item.map.commentCoumt}}</span>
                                    </label>
                                    <label>
                                        <span>观看时长</span>
                                        <span>{{item.minute_num}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.map.masterAppointmentInfo.start_time}}-{{item.map.masterAppointmentInfo.end_time}}</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                        <div v-if="MyscheduleList.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无数据</span>
                            </label>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="Historytimetable-content-content" v-else-if="TeachcourseNavListIndex==1">
                <div class="Historytimetable-class-List">
                    <ul v-if="Personaltraininghistory.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt=""> 
                            <span>暂无已结束课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in Personaltraininghistory" :key="index">
                           <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.masterinfo.avatar" alt="" style="max-width: 80%;">
                                </label>
                                <label class="Historytimetable-class-Info" style="height:70%">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                     <label>
                                        <img src="/images/椭圆 30 拷贝@2x.png" alt="" class="PersonaltrainingLis-cover">
                                        <span>{{item.map.masterinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                     <label class="PersonaltrainingList-operation">
                                        <!-- <span>总结</span> -->
                                        <span>评论</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                        <div v-if="Personaltraininghistory.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无数据</span>
                            </label>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="Historytimetable-content-content" v-else-if="TeachcourseNavListIndex==2">
                <div class="Historytimetable-class-List">
                    <ul v-if="Personaltraininghistory.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无已结束课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in Personaltraininghistory" :key="index">
                           <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.masterinfo.avatar" alt="" style="max-width: 80%;">
                                </label>
                                <label class="Historytimetable-class-Info" style="height:70%">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                     <label>
                                        <img src="/images/椭圆 30 拷贝@2x.png" alt="" class="PersonaltrainingLis-cover">
                                        <span>{{item.map.masterinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                     <label class="PersonaltrainingList-operation">
                                        <span>总结</span>
                                        <span>评论</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                        <div v-if="Personaltraininghistory.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无数据</span>
                            </label>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="Historytimetable-content-content" v-else-if="TeachcourseNavListIndex==3">
                <div class="Historytimetable-class-List">
                    <ul v-if="Personaltraininghistory.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无已结束课程</span>
                        </label>
                    </ul>
                    <ul v-else>  
                        <li v-for="(item,index) in Personaltraininghistory" :key="index">
                           <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.masterinfo.avatar" alt="" style="max-width: 80%;">
                                </label>
                                <label class="Historytimetable-class-Info" style="height:70%">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                     <label>
                                        <img src="/images/椭圆 30 拷贝@2x.png" alt="" class="PersonaltrainingLis-cover">
                                        <span>{{item.map.masterinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                     <label class="PersonaltrainingList-operation">
                                        <span>总结</span>
                                        <span>评论</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                        <div v-if="Personaltraininghistory.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无数据</span>
                            </label>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="Historytimetable-content-content" v-else-if="TeachcourseNavListIndex==4">
                <div class="Historytimetable-class-List">
                    <ul v-if="Personaltraininghistory.length == 0" class="nodates">
                        <label>
                            <img src="/images/暂无课程安排.png" alt="">
                            <span>暂无已结束课程</span>
                        </label>
                    </ul>
                    <ul v-else>
                        <li v-for="(item,index) in Personaltraininghistory" :key="index">
                           <div class="Historytimetable-class-List-content">
                                <label>
                                    <img :src="item.map.masterinfo.avatar" alt="" style="max-width: 80%;">
                                </label>
                                <label class="Historytimetable-class-Info" style="height:70%">
                                    <label class="Personalschedule-class-info-head">
                                        <span>{{item.title}}</span>
                                    </label>
                                     <label>
                                        <img src="/images/椭圆 30 拷贝@2x.png" alt="" class="PersonaltrainingLis-cover">
                                        <span>{{item.map.masterinfo.nick_name}}</span>
                                    </label>
                                    <label>
                                        <span>{{item.create_time}}</span>
                                        <span>{{item.start_time}}-{{item.end_time}}</span>
                                    </label>
                                     <label class="PersonaltrainingList-operation">
                                        <span>总结</span>
                                        <span>评论</span>
                                    </label>
                                </label>
                            </div>
                        </li>
                        <div v-if="Personaltraininghistory.length ==0" class="Noclass">
                            <label>
                                <img src="/images/暂无课程安排.png" alt="" class="noClassimg">
                                <span>暂无数据</span>
                            </label>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="Lvie-cl-de-con-pagination">
             <el-pagination background layout="prev, pager, next" :page-size="8" :total="total" :currentPage='currentPage' @current-change="handleCurrentChange"></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    name:'Myschedule',
    data(){
        return{
            Timersvalue: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            MyscheduleList:[],
            languageEn:[
                {"Estonian":"爱沙尼亚语"},
				{"Arabic":"阿拉伯语"},
				{"Bulgarian":"保加利亚语"},
				{"polish":"波兰语"},
				{"Danish":"丹麦语"},
				{"German":"德语"},
				{"Russian":"俄语"},
				{"Traditional Chinese":"繁体中文"},
				{"French":"法语"},
				{"Finnish":"芬兰语"},
				{"Korean":"韩语"},
				{"Dutch":"荷兰语"},
				{"Czech":"捷克语"},
				{"romanian":"罗马尼亚语"},
				{"Portuguese":"葡萄牙语"},
				{"Japanese":"日语"},
				{"Swedish":"瑞典语"},
				{"slovenian":"斯洛文尼亚语"},
				{"Thai":"泰语"},
				{"Spanish":"西班牙语"},
				{"Greek":"希腊语"},
				{"hun":"匈牙利语"},
				{"Italian":"意大利语"},
				{"English":"英语"},
				{"Vietnamese":"越南语"},
				{"cantonese":"粤语"},
				{"Chinese":"中文"}
            ],
            TeachcourseNavList:['直播课堂讲师','私教','跨境助学师','母语助学师','专业助学师'],
            TeachcourseNavListIndex:'',
            userinfo:JSON.parse(localStorage.getItem('userinfo')),
            PersonaltrainingList:[
                {
                    avater:'/images/图层 9.png',
                    title:'话题/学习教育',
                    nick_name:'可口可乐',
                    times:'2020-05-22',
                    data:'14:00-14:30'
                }
            ],
            crossborderHlep:[
                {
                    avater:'/images/图层 9.png',
                    title:'话题/学习教育',
                    nick_name:'啊哈哈',
                    times:'2020-05-28',
                    data:'14:00-14:30'
                }
            ],
            total:100,
            Personaltraininghistory:[],
            currentPage:0,
            Thetheme:[
                {"Scene/Restaurant":"场景/餐馆"},
                {"Scene/Post Office":"场景/邮局"},
                {"Scene/Hospital and health scene":"场景/医院及健康场景"},
                {"Scene/Hotel":"场景/酒店"},
                {"Scene/Shopping mall":"场景/商场购物"},
                {"Scene/Work and work scenes":"场景/商场工作和上班场景购物"},
                {"Scene/Airport":"场景/机场"},
                {"Scene/Farm":"场景/农场"},
                {"Scene/Campus":"场景/校园"},
                {"Scene/Travel":"场景/旅行"},
                {"Scene/Supermarket":"场景/超市"},
                {"Scene/Drive":"场景/驾驶"},
                {"Scene/Wedding":"场景/婚礼"},
                {"Scene/Cinema":"场景/电影院"},
                {"Scene/Entertainment place":"场景/娱乐场所"},
                {"Scene/Gymnasium":"场景/体育馆"},
                {"Scene/Museum":"场景/博物馆"},
                {"Scene/Bar or KTV":"场景/酒吧或KTV"},
                {"Topic/Self introduction":"主题/自我介绍"},
                {"Topic/Learning and education":"主题/学习教育"},
                {"Topic/Talk about music":"主题/聊聊音乐"},
                {"Topic/Talk about family":"主题/聊聊家人"},
                {"Topic/Talk about dressing":"主题/聊聊穿着"},
                {"Topic/Talk about friends":"主题/聊聊朋友"},
                {"Topic/Talk about delicious food":"主题/聊聊美食"},
                {"Topic/Festivals and customs":"主题/节日和习俗"},
                {"Topic/Talk about variety show":"主题/聊聊综艺节目"},
                {"Topic/Talk about the near future plan":"主题/聊聊近期计划"},
                {"Topic/Talking about hobbies":"主题/聊聊爱好"},
                {"Topic/Talk about learning":"主题/聊聊学习"},
                {"Topic/Talk about TV series":"主题/聊聊电视剧"},
                {"Topic/Talk about movies":"主题/聊聊电影"},
                {"Topic/Talk about work":"主题/聊聊工作"},
                {"Topic/How to learn the language well":"主题/怎么学好这个语言"},
                {"Topic/About tourism":"主题/关于旅游"},
                {"Topic/Talk about geography":"主题/聊聊地理"},
                {"Topic/Talking about ideals":"主题/谈谈理想"},
                {"Topic/Talk about love":"主题/聊聊爱情"},
                {"Topic/Talk about the weather":"主题/聊聊天气"},
                {"Topic/Talk about some interesting things":"主题/聊一些趣事"},
            ],
        }
    },
    methods:{
        deleteitem:function remove(arr, index) {  
            var result=[];  
            for(var i=0; i<arr.length; i++){  
                if(arr[i]!=item){  
                    result.push(arr[i]);  
                }  
            }  
            return result;  
        },
        handleCurrentChange(val) {
            this.currentPage = val
            console.log(this.currentPage)
            if(this.TeachcourseNavListIndex == 0){
                this.Getlist()
            }else if (this.TeachcourseNavListIndex == 1){
                this.getsijiaoList()
            }else if(this.TeachcourseNavListIndex == 2 ||this.TeachcourseNavListIndex == 3 ||this.TeachcourseNavListIndex == 4){
                this.getzhuxueshiList()
            }
        },
        Tabescelect(e){//选项卡切换
            this.currentPage = 1
            this.TeachcourseNavListIndex = e
            if(this.TeachcourseNavListIndex == 1){
                this.getsijiaoList()
            }else if(this.TeachcourseNavListIndex == 2 ||this.TeachcourseNavListIndex == 3 ||this.TeachcourseNavListIndex == 4) {
                this.getzhuxueshiList()
            }else if (this.TeachcourseNavListIndex == 0){
                this.Getlist()
            }
        },
        getsijiaoList(){
            var data ={
                currentPage : this.currentPage,
                pageSize : 8,
                user_id : this.userinfo.user_id,
                type:'single_class',
                master_type:'private_education',
            }
            this.Personaltraininghistory = []
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryHistoryListPage',
                params:data,
            }).then((response) =>{
                console.log(response.data.data,'私教历史课程')
                this.Personaltraininghistory = response.data.data
                this.Personaltraininghistory.forEach(e=>{
                    var stars = e.start_time
                    var entimes = e.end_time
                    var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                    var starttime =  stars.substring(11, 16)//截取开始时间
                    var endtime =  entimes.substring(11, 16)//截取结束时间
                    e['create_time'] = times
                    e['start_time'] = starttime
                    e['end_time'] = endtime
                    this.Thetheme.forEach(is=>{
                    if(is[e['title']]){
                        e['title'] = is[e['title']]
                    }
                })
                })
            }).catch((error) =>{
                console.log(error)
            })
        },
        getzhuxueshiList(){
            var data ={
                currentPage : this.currentPage,
                pageSize : 8,
                user_id : this.userinfo.user_id,
                type:'single_class',
            }
            this.Personaltraininghistory = []
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userAppointment/queryHistoryListPage',
                params:data,
            }).then((response) =>{
                console.log(response.data.data,'助学师历史课程')
                response.data.data.forEach(e=>{
                    var stars = e.start_time
                    var entimes = e.end_time
                    var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                    var starttime =  stars.substring(11, 16)//截取开始时间
                    var endtime =  entimes.substring(11, 16)//截取结束时间
                    e['create_time'] = times
                    e['start_time'] = starttime
                    e['end_time'] = endtime
                    this.Thetheme.forEach(is=>{
                        if(is[e['title']]){
                            e['title'] = is[e['title']]
                        }
                    })
                })
                let kechenginfo = {}
                response.data.data.map(item=>{
                    if(item.master_type !== 'private_education'){
                        kechenginfo = item
                        this.Personaltraininghistory.push(kechenginfo)
                    }
                })
            }).catch((error) =>{
                console.log(error)
            })
        },
        Getlist(){
            var data ={
                currentPage : this.currentPage,
                pageSize : 8,
                user_id : this.userinfo.user_id
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/classRecord/queryHistoryListPage',
                params:data,
            }).then((response) =>{
                console.log(response.data.data,'aa')

                response.data.data.map((item,index)=>{{
                    if(item.map.masterAppointmentInfo == null ){
                        console.log(this.MyscheduleList,item)
                        response.data.data.splice(index,1)
                    }else{
                        console.log(this.MyscheduleList,item)
                        this.MyscheduleList.push(item)
                    }
                }})
                this.MyscheduleList =response.data.data
                // this.total=response.data.total
                this.MyscheduleList.forEach(e=>{
                    var stars = e.map.masterAppointmentInfo.start_time
                    var entimes = e.map.masterAppointmentInfo.end_time
                    var times = stars.substring(0, stars.indexOf(' '))//截取当前日期
                    var starttime =  stars.substring(11, 16)//截取开始时间
                    var endtime =  entimes.substring(11, 16)//截取结束时间
                    var myDate = new Date(Date.parse(times));  
                    e['create_time'] = times
                    e.map.masterAppointmentInfo['start_time'] = starttime
                    e.map.masterAppointmentInfo['end_time'] = endtime
                    if(e.map.masterAppointmentInfo.language_level == 'Zero basis'){
                        e.map.groupinfo['language_level'] = '零基础'
                    }else if(e.map.masterAppointmentInfo.language_level == 'Intermediate'){
                        e.map.groupinfo['language_level'] = '中级'
                    }else if(e.map.masterAppointmentInfo.language_level == 'Primary'){
                        e.map.groupinfo['language_level'] = '初级'
                    }else if(e.map.masterAppointmentInfo.language_level == 'Intermediate'){
                        e.map.groupinfo['language_level'] = '中级'
                    }
                    this.languageEn.forEach(function(j){
                        if(j[e.map.groupinfo['language']]){
                            e.map.groupinfo['language']=j[e.map.groupinfo['language']]
                        }
                            
                    })
                    this.Thetheme.forEach(is=>{
                        if(is[e.map.masterAppointmentInfo['title']]){
                            e.map.masterAppointmentInfo['title'] = is[e.map.masterAppointmentInfo['title']]
                        }
                    })
                });
            }).catch((error) =>{
                console.log(error)
            })
        },
        // handleCurrentChange(val) {
        //     var data ={
        //         pagesize:val
        //     }
        //     this.$axios({
        //         method:'get',
        //         url:'http://api.hxly.club/user/course',
        //         params:data,
        //     }).then((response) =>{
        //         this.MyscheduleList =response.data.data
        //         this.total=response.data.total
        //     }).catch((error) =>{
        //         console.log(error)
        //     })
        // },
        Toclassdetil(item){
            console.log(item)
            this.$router.push({path:'/views/Learningcenter/Teachingcentercoursedetails',query: {id: item.map.masterAppointmentInfo.id,Isend:true}})
        }
    },
    created(){
        this.Getlist()
    },
}
</script>
<style scoped lang="less">
.Noclass{
    position: relative;
    width: 90%;
    margin: 0 auto;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .noClassimg{
        width: 65px;
        height: 55px;
    }
}
.Noclass>label{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.Noclass>label>span{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #d8d8d8;
    margin-top: 10px;
}
    .Historytimetable{
        position: relative;
        width: 100%;
        border-radius: 20px;
        background: #ffffff;
        min-height: 1041px;
    }
    /*头部样式*/
    .Historytimetable-head{
        position: relative;
        width: 90%;
        height: 80px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #2DC7C8;
        label{
            height: 30px;
            &:first-child{
                width: 12%;
                height: 20px;
                color: #2DC7C8;
                font-weight: bold;
                border-left: 8px solid #2DC7C8;
                padding-left: 1%;
            }
        }
    }
    .Timersvalues{
        width: 44%;
        margin-left: 34%;
        /deep/.el-range-editor{
            width: 100%;
            height: 30px;
            border-radius: 15px;
            border: 1px solid #47CECF;
            /deep/.el-range-separator{
                line-height: 22px;
            }
            /deep/.el-range__icon{
                line-height: 22px;
            }
            /deep/.el-range__close-icon{
                display: none;
            }
        }
    }
    .screenings{
        width: 10%;
        padding-left: 2%;
        span{
            display: inline-block;
            width: 100%;
            height: 30px;
            background:rgba(71,206,207,1);
            border-radius:15px;
            line-height: 30px;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
        }
    }
    /*内容样式*/
    .Historytimetable-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        min-height: 800px;
        height: auto;
    }
    /*tabs选项卡切换*/
    .Historytimetable-content-nav{
        position: relative;
        width: 100%;
        height: 50px;
        ul{
            display: flex;
            list-style: none;
            height: 50px;
            align-items: center;
            justify-content: flex-end;
            padding: 0;
            li{
                height: 50px;
                line-height: 50px;
                border:1px solid transparent;//解决点击选中后变形问题
                text-align: center;
                cursor: pointer;
                margin-left: 40px;
            }
        }
    }
    .navelecet{
        color: #2DC7C8;
        border-bottom: 2px solid #2DC7C8!important;
    }
    /*列表样式*/
    .Historytimetable-class-List{
        position: relative;
        width: 100%;
        padding-bottom: 40px;
        ul{
            display: flex;
            width: 100%;
            list-style: none;
            padding: 0;
            flex-wrap: wrap;
            justify-content: space-between;
            li{
                width: 48%;
                height: 200px;
                border:1px solid rgba(54,205,206,1);
                border-radius:5px;
                margin-top: 20px;
            }
        }
    }
    .Historytimetable-class-List-content{
        position: relative;
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: center;
    }
    .Historytimetable-class-List-content>label:first-child{
        width: 50%;
        border-radius: 15px;
        overflow: hidden;
        height: 80%;
        img{
            width: auto;
            height: auto;
            max-width: 100%;
        }
    }
    .Historytimetable-class-Info{
        width: 50%;
        height: 90%; 
        padding-left: 6%;
        label{
            display: flex;
            // justify-content: space-between;
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            margin-top: 8px;
            span{
                display: inline-block;
                width: auto;
                &:first-child{
                    width: auto;
                }
                &:last-child{
                    margin-left: 4%;
                }
            }
        }
    }
    .Historytimetable-class-Info>.Historytimetable-class-Infos{
        margin-top: 10px;
        
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
    .Personalschedule-class-info-head{
        span{
            width: 100%!important;
            overflow: hidden;
            color: #555555;
            font-weight: bold;
            font-size: 20px;
            margin: 0 auto!important;
        }
    }
    .PersonaltrainingList-operation{
        margin-left: auto;
        span{
            color: #2DC7C8;
            cursor: pointer;
        }
    }
    .PersonaltrainingLis-cover{
        width: auto;
        height: 70%;
        max-width: 60%;
        margin-top: 3%;
    }
    .nodates{
        position: relative;
        width: 100%;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        label{
            width: 100%;
            text-align: center;
            flex-wrap: wrap;
            img{
                width: 63px;
                height: 51px;
            }
        }
        span{
            display: inline-block;
            width: 100%;
            color: #e7e7e7;
            margin-top: 10px;
        }
    }
</style>